<template>
  <div>
    <basic-dialog
      :visible.sync="dialogVisible"
      :handleClose="handleCloseDialog"
      :title="title"
      :show-footer="false"
      :width="'60%'"
    >
      <div class="form-container">
        <el-form ref="queryData" :inline="true" :model="queryData" @submit.native.prevent>
          <el-form-item label="品牌名称:" prop="brandName">
            <el-input
              v-model="queryData.brandName"
              placeholder="请输入品牌名称"
              @keyup.enter.native="handleQueryData(1)"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQueryData(1)"
              >查询</el-button
            >
            <el-button @click="handleResetData('queryData')">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-tabs
        v-model="tabsStatus"
        @tab-click="handleClickTabs"
        style="margin: 10px"
      >
        <el-tab-pane
          label="未选择"
          name="notAssociated"
          :disabled="tabpaneDisabled"
        >
        </el-tab-pane>
        <el-tab-pane
          label="已选择"
          name="isAssociated"
          :disabled="tabpaneDisabled"
        >
        </el-tab-pane>
      </el-tabs>
      <BasicTable
        ref="basicTable"
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="443"
        :showSelectCol="false"
        @rowDblclick="handleSelectSupplier"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      />
    </basic-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/supplier/BasicTable';
import { getBtnsId } from '@/libs/btnsPermission';
import { queryBrandList } from '@/api/supplier/components';

import { isResponseSuccess } from '@/pages/supplier/utils/bizUtils';

export default {
  name: 'BrandSelect',
  components: {
    BasicDialog,
    BasicTable,
  },
  props: {
    title: {
      type: String,
      default: '选择品牌'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    brandList: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data () {
    return {
      selectList: [],
      tabsStatus: 'notAssociated', // 当前tabs页签
      tabpaneDisabled: false, // tabs禁用状态
      queryData: {
        brandName: '', // 品牌名称
        notInUuids: [],
        inUuids: [],
      },
      pageSizes: [10, 20, 30, 40],
      pagination: {
        pageNum: 1,
        total: 0,
        pageSize: 10,
      },
      tableInfo: {
        list: [],
        loading: false,
        columns: [
          { title: '品牌ID', key: 'uuid', width: 150 },
          { title: '品牌名称', key: 'brandName', width: 100 },
          { title: '英文名称', key: 'brandEnName', width: 100 },
          { title: '品牌描述', key: 'note', width: 500 },
          // {title: '档次定位(内部)',key: 'insideLevelStr',width: 140},
          // {title: '档次定位(外部)',key: 'outsideLevelStr',width: 140},
          // {title: '创建时间',key: 'createOpeTime',width: 180},
          // {title: '审批状态',slot: 'auditState',width: 100},
          // {title: '启用状态',key: 'brandStateStr',width: 100},
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: 90,
            fixed: 'right',
            render: (h, { row }) => {
              if (this.tabsStatus == 'notAssociated') {
                return <el-button size="mini" type="text" onClick={() => this.handleSelectSupplier(row)}>选择</el-button>
              }
              return <el-button size="mini" type="text" onClick={() => this.handleCancelSelect(row)}>取消选择</el-button>
            }
          },
        ],
      }
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  watch: {
    brandList: {
      handler (val) {
        this.selectList = val;
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleClickTabs () {
      this.handleQueryData(1);
    },
    // 选择供应商
    handleSelectSupplier (row) {
      this.$emit('handle-select', { row, type: 'select' });
      setTimeout(() => {
        this.handleQueryData()
      }, 100)
    },
    // 取消选择供应商
    handleCancelSelect (row) {
      this.$emit('handle-select', { row, type: 'cancel' });
      setTimeout(() => {
        this.handleQueryData()
      }, 100)
    },
    // 过滤用户账号id
    filterUserJobNum () {
      return this.selectList.map(item => parseInt(item.brandId, 10));
    },
    // 获取 表格数据
    handleQueryData (nowPage = this.pagination.pageNum, pageShow = this.pagination.pageSize) {
      if (this.tabsStatus == 'notAssociated') {
        this.queryData.notInUuids = this.filterUserJobNum();
        this.queryData.inUuids = [];
      }
      if (this.tabsStatus == 'isAssociated') {
        this.queryData.notInUuids = [];
        this.queryData.inUuids = this.filterUserJobNum();
      }
      if (this.tabsStatus == 'isAssociated' && !this.selectList.length) {
        this.tableInfo.list = []
        return
      }
      this.tabpaneDisabled = true;
      this.tableInfo.loading = true;
      sessionStorage.setItem('buttonId', getBtnsId('查询'));
      queryBrandList({ ...this.queryData, nowPage, pageShow }).then(res => {
        this.tableInfo.loading = false;
        this.tabpaneDisabled = false;
        if (isResponseSuccess(res)) {
          const { result } = res;
          this.tableInfo.list = result.records;
          this.pagination.pageNum = result.current;
          this.pagination.pageSize = result.size;
          this.pagination.total = result.total;
          this.reloadTableLayout()
        }
      }).catch(() => {
        this.tableInfo.loading = false;
        this.tabpaneDisabled = false;
      });
    },
    // 分页状态变更
    handlePageChange (pageNum) {
      this.handleQueryData(pageNum);
    },
    // 分页状态变更
    handlePageSizeChange (pageSize) {
      this.handleQueryData(1, pageSize);
    },
    // 重置查询条件
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:dialogVisible', false);
    },
    // 表格DOM重新渲染
    reloadTableLayout () {
      this.$nextTick(() => {
        this.$refs.basicTable && this.$refs.basicTable.$refs.elTable && this.$refs.basicTable.$refs.elTable.doLayout();
      });
    },
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
